<template>
  <div class="wrap_body_right">
    <div class="wrap_body_right_one">
      <div class="right_one_head">
        <div class="right_one_head_btn">
          <div v-show="addFlag">
            <el-button class="btnDefault" @click="iconSave" v-show="jYflag">保存</el-button>
            <el-button class="btnDefault" v-show="!jYflag" disabled>保存</el-button>
            <el-button class="btnDefault" @click="iconClose">取消</el-button>
          </div>
        </div>

        <div class="right_one_head_now">
          <span>当前位置 :</span>
          <span v-show="!addFlag">用户管理</span>
          <span v-show="addFlag">角色配置</span>
          <!-- <span v-if="add">&gt{{useInfo[0].name}}</span>
          <span v-if="updata">&gt{{useInfo[1].name}}</span>
          <span v-if="flagQxgl">&gt{{useInfo[2].name}}</span>
          <span v-if="flagXtgl">&gt{{useInfo[3].name}}</span>-->
        </div>
      </div>
      <div class="fixThTable right_one_body table" v-if="!addFlag">
        <div class="tableBody">
        <el-table
          :data="tableData"
          border
          height="660"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column prop="number" label="序号"></el-table-column>

          <el-table-column prop="Rfname" label="人防单位名称">
             <template slot="header">
              <div class="titleDiv">人防单位名称</div>
               <el-cascader
            :options="data"
            :props="{ checkStrictly: true }"
            style="width:50px;"
            class="noBg"
            v-model="value"
            @change="elChange"
            clearable
          ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="用户账号"></el-table-column>
          <el-table-column prop="chaineseName" label="用户名称"></el-table-column>
          <el-table-column prop="userMd" label="用户密级"></el-table-column>
          <el-table-column prop="time" label="建立时间"></el-table-column>
          <el-table-column prop="open" label="是否启用"></el-table-column>
          <!-- <el-table-column prop="starstyle" label="角色信息"></el-table-column> -->
          <el-table-column prop label="操作" width="260">
            <template slot-scope="scope">
              <span
                @click.prevent="updataStatu(scope.$index,scope.row)"
                class="normalColor mr10 cursor"
              >角色配置</span>
              <span
                @click.prevent="UpdataRow2(scope.$index,scope.row)"
                class="normalColor mr10 cursor"
              >重置密码</span>
              <span
                @click.prevent="DelectRow2(scope.$index,scope.row)"
                class="normalColor mr10 cursor"
              >删除</span>
            </template>
          </el-table-column>
        </el-table>
        </div>

        <div class="page">
          <pages :page="page" @changePage="changePage"></pages>
        </div>
      </div>
      <div class="right_one_body1" v-if="addFlag">
        <div class="qxBox">
          <div class="qxBox_left">
            <div class="qxBox_left_b">
              <div class="left_b_header">用户基本信息</div>
              <div class="left_b_body">
                <div class="dv" v-for="item in userInfo" :key="item.index">
                  <span>{{item.key}}:</span>
                  <span>{{item.value}}</span>
                </div>
                <!-- <div class="dv">
                  <span>建立时间:</span>
                  <div class="block">
                    <el-date-picker class="noBg border1" v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
                  </div>
                </div>-->
                <div class="dv">
                  <span>用户状态:</span>
                  <el-radio-group v-model="radio">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">未启用</el-radio>
                  </el-radio-group>
                </div>
                <div class="dv">
                  <span>联系方式:</span>
                  <el-input style="width:350px;" class="noBg border1" v-model="input.tel" clearable @change="checksjh(input.tel)"></el-input>
                </div>
                <div class="dv">
                  <span>邮箱号码:</span>
                  <el-input
                    style="width:350px;"
                    class="noBg border1"
                    v-model="input.email"
                    clearable
                    @change="checkYx(input.email)"
                  ></el-input>
                </div>
                <div class="dv">
                  <span>用户密码:</span>
                  <el-input
                    style="width:350px;"
                    class="noBg border1"
                    v-model="input.psw"
                    clearable
                    password
                  ></el-input>
                </div>

                <!-- <div class="dv">
                  <span>账号状态:</span>
                  <el-select
                    v-model="value"
                    style="width:350px;"
                    class="noBg border1"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>-->
                <div class="dv" v-show="usermdFlag">
                  <span>用户密级:</span>
                  <el-select
                    v-model="value"
                    style="width:350px;"
                    class="noBg border1"
                    placeholder="请选择"
                    @change="yhmjChange"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </div>
          <div class="qxBox_right">
            <div class="qxBox_right_b">
              <div class="left_b_header">角色信息</div>
              <div class="left_body">
                <div class="ww">
                  <!-- 角色:
                  <el-select v-model="value" class="noBg border1" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>-->
                </div>
                <div class="check_1">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in ckList" :key="item.id" :label="item.roleID">{{item.roleName}}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <!-- <div class="check_1">
                  <el-checkbox-group
                  v-model="checkList1">
                    <el-checkbox label="代理维护下级"></el-checkbox>
                    <el-checkbox label="工程车"></el-checkbox>
                    <el-checkbox label="工程"></el-checkbox>
                  </el-checkbox-group>
                </div>-->
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="submit_footer">
          <el-button type="primary" @click="QxSubmitForm">保存</el-button>
        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
import pages from "../base/pages.vue";
import moment from "moment";
import {baseServe} from "../../request/api";

export default {
  name: "userAdmin",
  data() {
    return {
      //校验flag，如果校验不对允许保存
      jYflag: true,
      data:[],
      rfdwnm: "",
      ID: null,
      radio: "",
      userName: "",
      usermdFlag: false,
      userMd: "",
      secrectLevel:"",
      num: null,
      time: new Date(),
      addFlag: false,
      checked: "",
      value1: "",
      value: "",
      ckList: [],
      input: {
        tel: "",
        email: "",
        psw: "",
        suerpsw: ""
      },
      page: {
        //总条数
        total: -1,
        //每页条数
        limit: 10,
        //当前页数
        currentPage: 1,
        pageSizes: [10, 25, 50, 100],
        //实际返回的条数
        dataLength: 7
      },
      jueseList: [
        {
          name: "报审"
        },
        {
          name: "审核"
        },
        {
          name: "非报批非审核"
        }
      ],
      options: [
        {
          value: "10",
          label: "非密"
        },
        {
          value: "20",
          label: "内部"
        },
        {
          value: "30",
          label: "秘密"
        },
        {
          value: "40",
          label: "机密"
        }
      ],
      userInfo: [
        {
          key: "人防单位",
          value: "上海"
        },
        {
          key: "用户账号",
          value: "张三"
        }
      ],
      checkList: [],
      checkList1: [],
      tableData: [],
      useInfo: [
        { name: "新增用户" },
        { name: "修改用户" },
        { name: "编辑权限" },
        { name: "配置系统" }
      ]
    };
  },
  filters: {
    dataFormat(el) {
      return moment(el).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  mounted() {
    this.formLisr();
    this.rolesQuery();
    this.treeList()
  },
  computed: {
    TreeRfdwnm() {
      return this.$store.state.TreeRfdwnm;
    }
  },
  watch: {
    TreeRfdwnm() {
      this.page.limit = 10;
      this.page.currentPage = 1;
      this.formLisr();
    },
  },
  methods: {
    //角色信息
    rolesQuery() {
      let params = {
        serviceName: localStorage.getItem("serverName"),
        pid: localStorage.getItem("serverName")
      };
      this.$axios.post("/role/query", params).then(res => {
        res = res.data.roles;
        res.forEach(item => {
          this.ckList.push({
            roleID: item.roleID,
            roleName: item.roleName
          });
        });
      });
    },
    yhmjChange(val) {
    },
    //列表数据
    elChange() {
      this.$store.state.TreeRfdwnm=this.value[this.value.length-1]
      localStorage.setItem("TreeRfdwnmBmy",this.value[this.value.length-1])
      // this.treeList()
    },
     treeList() {
      this.data = [];
      let params = {
        rfdwnm: 821
      };
       baseServe.cityList( params ).then(res => {
        res = res.data.qgrfdwModels;
        res.forEach(item => {
          this.data.push({
            label: item.rfdwmc,
            value: item.xh,
            children: item.qgrfdwModels.map(i => {
              let obj = {
                label: i.rfdwmc,
                value: i.xh,
                children: i.qgrfdwModels.map(j => {
                  let obj = {
                    label: j.rfdwmc,
                    value: j.xh
                  };
                  return obj;
                })
              };
              return obj;
            })
          });
        });
      });
    },
    formLisr() {
      let params = {
        serviceName: localStorage.getItem("serverName"),
        limit: this.page.limit,
        // start: this.page.total % this.page.limit == 0 ? this.page.currentPage -1 :this.page.currentPage,
        start:this.page.currentPage,
        rfdwnm: this.$store.state.TreeRfdwnm
          ? this.$store.state.TreeRfdwnm
          : 822
      };
      if(this.delectFlag == 1 && this.page.total!=1){
        params.start = ((this.page.total % this.page.limit) == 1) ? (this.page.currentPage -1) :this.page.currentPage
      }
      this.$axios.get("/rfdwnm/query", { params }).then(res => {
        this.tableData = [];

        this.page.total = res.data.totoalCount;
        res = res.data.users;
        res.forEach((item, index) => {
          this.userMd = "";
          switch (item.secrectLevel) {
            case "10":
              this.userMd = "非密";
              break;
            case "20":
              this.userMd = "内部";
              break;
            case "30":
              this.userMd = "秘密";
              break;
            case "40":
              this.userMd = "机密";
              break;
          }

          this.tableData.push({
            userID: item.userID,
            number: index + 1,
            Rfname: item.rfdwmc,
            userName: item.account,
            chaineseName: item.userName,
            time: moment(item.createTime).format("YYYY-MM-DD HH:mm:ss"),
            userMd: item.secrectLevel == "" ? "" : this.userMd,
            secrectLevel:item.secrectLevel,
            tel: item.mobile,
            email: item.email,
            psw: item.password,
            open: item.status == 0 ? "否" : "是 ",
            status: item.status,
            rolesarr: item.roles,
            rfdwnm: item.rfdwnm
          });
        });
      });
    },
    //重置密码
    UpdataRow2(index, row) {
      this.$confirm("是否重置密码?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      })
        .then(() => {
          let params = {
            account: row.userName
          };

          this.$axios.get("reset/password", { params }).then(res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "重置成功!密码是" + res.data.password,
                //       dangerouslyUseHTMLString: true,
                // message: '<strong>重置成功!</strong><br>  <strong>密码:</strong>'+res.data

              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置"
          });
        });
    },
    handleCurrentChange() {},
    //校验信息
    //手机号
    checksjh(item){
      if (!(/^1(3|4|5|7|8)\d{9}$/.test(item))&& item != "") {
        this.$message({
          type: "warning",
          message: "请输入正确的手机号码!"
        });
        this.jYflag = false
      }
      else {
        this.jYflag = true
      }
    },
    //邮箱校验
    checkYx(item){
      if (!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(item))&& item != "") {
        this.$message({
          type: "warning",
          message: "请输入正确的邮箱!"
        });
        this.jYflag = false
      }
      else {
        this.jYflag = true
      }
    },
    //编辑权限
    updataStatu(index, row) {
      this.addFlag = true;
      this.checkList = row.rolesarr;
      if (row.userMd == "") {
        this.usermdFlag = true;
      } else {
        this.usermdFlag = false;
       this.secrectLevel=row.secrectLevel
      }
      this.rfdwnm = row.rfdwnm;
      this.radio = row.status;
      this.ID = row.userID;
      this.userName = row.chaineseName;
      this.userInfo[0].value = row.Rfname;
      this.userInfo[1].value = row.userName;
      this.input.tel = row.tel;
      this.input.psw = row.psw;
      this.input.email = row.email;

      this.$axios.get("/query/roles",{params:{userID:this.ID}}).then(res=>{
        this.checkList=res.data.roleIDs
      })
      this.checksjh(this.input.tel)
      this.checkYx(this.input.email)
    },
    //保存按钮
    iconSave() {
      let params = {
        status: this.radio,
        account: this.userInfo[1].value,
        rfdwnm: this.rfdwnm,
        userID: this.ID,
        userName: this.userName,
        password: this.input.psw,
        mobile: this.input.tel,
        email: this.input.email,
        secrectLevel: this.usermdFlag==false?this.secrectLevel:this.value
      };
      if (
        this.input.email &&
        this.input.tel &&
        this.userName &&
        this.ID &&
        this.userInfo[1].value !== ""
      ) {
        this.$axios.post("/update", params).then(res => {
          if ((res.data.result.resultCode = "000000")) {
            this.addFlag = false;
            this.$message({
              type: "success",
              message: "编辑成功!"
            });
            this.formLisr();
          }
        });
      } else {
        this.$message({
          type: "error",
          message: "请确认填写信息是否完整!"
        });
      }
      let param = {
        userID: this.ID,
        userRolePowers: [
          // {
          //   creater: localStorage.getItem("creater"),
          //   rolename: "string",
          //   status: 1,
          //   userID: this.ID,
          // }
        ]
      };
      this.checkList.forEach(item => {
        param.userRolePowers.push({
          serviceName: localStorage.getItem("serverName"),
          creater: localStorage.getItem("creater"),
          roleID: item,
          status: 1,
          userID: this.ID
        });
      });
      this.$axios.post("/upsert/role/relation", param).then(res => {
      });
    },
    //关闭按钮
    iconClose() {
      this.addFlag = false;
    },
    //currentPage
    changePage(data) {
      this.page = data;
      this.formLisr();
    },
    //点击选择角色快
    jueseSellect(index) {
      this.num = index;
    },
    //删除
    DelectRow2(index, row) {
      let ID = row.userID;
      let params = { userID: ID };

      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.get("/delete", { params }).then(res => {
            if ((res.data.result.resultCode = "000000")) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.delectFlag = 1;
              this.formLisr();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    this.delectFlag = 0;
    }
  },
  components: {
    pages
  }
};
</script>
<style lang="less" >
  .el-cascader__dropdown {
    background: rgba(30, 60, 72, 0.8);
    border: 1px solid #00ffff;
    .el-cascader-node__label{
      color: #ffffff;
    }
  }
  .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
    background: #3ea6a7;
  }
.wrap_body_right {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // padding: 0 20px 20px 0;
  .wrap_body_right_one {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px 2px #30334e99;
    .right_one_head {
      display: flex;
      height: 7%;
      line-height: 2;
      justify-content: space-between;
      padding: 0 20px;
      color: #fff;
      .right_one_head_btn {
        width: 80%;
        margin-top: 10px;
        // span {
        //   display: inline-block;
        //   height: 35px;
        //   line-height: 35px;
        //   border: 1px solid;
        //   width: 120px;
        //   // margin-top: 2%;
        //   text-align: center;
        //   // background-color: #619dbf;
        //   // border-radius: 3px;
        //   // box-shadow: 0px 0px 3px 1px #54bad1;
        //   margin-right: 3%;
        //   cursor: pointer;
        //   &:active {
        //     background-color: #197fb0;
        //   }
        // }
      }
      .right_one_head_now {
        // width: 20%;
        margin-top: 20px;
      }
    }
    .right_one_body {
      background-color: transparent;
      height: 93%;
      width: 100%;
      padding: 0% 1% 2%;
      position: relative;
      box-sizing: border-box;
      // .el-table th {
      //   background-color: #11657d;
      //   // box-shadow: 0px 0px 1px 1px #2bb69f inset;
      //   color: white;
      // }

      // fzy  人防单位下拉框样式修改 ***********************
      .el-table{
        .el-table th{
          padding: 12px 0;
        }
        .cell{
          height: 23px;
          .titleDiv{
            line-height: 25px;
            height: 23px;
          }
          .noBg{
            width: 50px;
            height: 23px;
            padding: 0;
            .el-input{
              height: 23px;
              padding: 0;
            }
            .el-input__icon{
              width: 20px;
            }
            .el-input--suffix{
              height: 35px !important;
              .el-input__suffix{
                top: -4px;
              }
              .el-input__inner{
                display: none;
                height: 23px;

              }
            }
          }

        }
      }
      .el-table__body tr.current-row > td {
        background-color: transparent;
      }
      .page {
        margin-top: 20px;
      }
    }
    .right_one_body1 {
      background-color: transparent;
      height: 93%;
      width: 100%;
      // padding: 2% 1%;
      position: relative;
      box-sizing: border-box;
      .qxBox {
        width: 100%;
        height: 99%;
        display: flex;
        .qxBox_left {
          width: 35%;
          height: 100%;

          .qxBox_left_b {
            margin: 0 50px;
            border: 1px solid #09a9ad;
            background-color: #1c3742;
            border-top: 5px solid #09a9ad;
            height: 100%;
            .left_b_header {
              margin: 10px 0 0 10px;
              font-size: 16px;
              color: #09a9ad;
            }
            .left_b_body {
              margin-top: 20px;
              padding-left: 10%;
              .dv {
                display: flex;
                margin: 15px 0;
                line-height: 30px;
                color: white;
                .el-radio-group {
                  padding-top: 7px;
                  padding-left: 20px;
                }
                span {
                  &:nth-of-type(1) {
                    margin-right: 10px;
                  }
                }
                // .el-input {
                //   width: 65%;
                // }
                // .el-select {
                //   width: 65%;
                //   .el-input-group__append {
                //     width: 100%;
                //   }
                // }
              }
            }
          }
        }
        .qxBox_right {
          width: 65%;
          height: 100%;
          //   background-color: skyblue;
          .qxBox_right_b {
            margin: 0 50px;
            border: 1px solid #09a9ad;
            height: 100%;
            border-top: 5px solid #09a9ad;
            background-color: #1c3742;
            .left_b_header {
              margin: 10px 0 0 10px;
              font-size: 16px;
              color: #09a9ad;
            }
            .left_body {
              // display: flex;
              margin-top: 20px;
              // justify-content: space-between;
              .ww {
                padding-left: 45px;
                color: white;
                margin-bottom: 30px;
              }
              .check_1 {
                padding-left: 45px;
                .el-checkbox__label {
                  color: #ccc;
                }
              }
            }
          }
        }
      }
      .submit_footer {
        position: absolute;
        bottom: 20px;
        right: 30px;
        .el-button--primary {
          color: #fff;
          background-color: #197fb0;
          border-color: #62a8ea;
          width: 130px;
        }
      }
    }
  }
}
</style>
